<template>
    <ElDropdown trigger="click" @command="changeLocale">
        <div class="el-dropdown-link">
            <i class="language-icon"></i>
            <span>{{ currentLocaleName }}</span>
        </div>
        <template #dropdown>
            <ElDropdownMenu>
                <ElDropdownItem
                    :class="{ active: i18n.global.locale.value === localeSetting.value }"
                    v-for="localeSetting in localeSettingList"
                    :key="localeSetting.value"
                    :command="localeSetting.value"
                >
                    {{ localeSetting.label }}
                </ElDropdownItem>
            </ElDropdownMenu>
        </template>
    </ElDropdown>
</template>

<script lang="ts" setup>
import { i18n, setLocale, t } from '@/i18n';
import { SupportLocale, SUPPORT_LOCALES } from '@/locals';
import { computed } from 'vue';

type ReactiveLocaleItem = {
    [x in SupportLocale]?: string;
};

const localeNameMap: Required<ReactiveLocaleItem> = {
    'zh-CN': '简体中文',
    en: 'English',
};

const localeSettingList = SUPPORT_LOCALES.map((e) => ({
    label: localeNameMap[e],
    value: e,
}));

const currentLocaleName = computed(() => {
    return localeNameMap[i18n.global.locale.value];
});

function changeLocale(val: SupportLocale) {
    setLocale(val);
}
</script>

<style>
.el-dropdown-link {
    cursor: pointer;
}
.el-dropdown-link span {
    vertical-align: 11px;
    font-size: 12px;
    color: #999999;
}
.language-icon {
    display: inline-block;
    cursor: pointer;
    width: 16px;
    height: 32px;
    margin-right: 5px;
    background: url(../assets/image/globe@2x.png) no-repeat 0 / 16px;
}
.el-dropdown-menu__item.active {
    color: var(--el-dropdown-menuItem-hover-color);
}
</style>
